Продолжим изучение CMS Joomla 3 и в рамках данной статьи поговорим о переопределение макетов. Разберем на конкретном примере как создать переопределение модуля последних новостей, чтобы вместе с названием (заголовком) материала выводить его изображение. Это может в дальнейшем пригодиться для создания своих собственных уникальных шаблонов. Но обо всем по порядку.
Что такое переопределение в Joomla?
Если сказать простыми словами, то под переопределением в Joomla подразумевают копирование файлов ядра в определенную папку с последующим их изменением по своему усмотрению и для своих нужд. Переопределение Joomla 3 еще часто называют шаблонизацией, ведь мы так сказать меняем шаблон вывода тех или иных расширений и компонентов системы.
Что можно переопределять?
В Joomla 3 переопределять можно практически все что угодно – компоненты, модули и макеты. Другими словами все то, что может потребоваться для решения поставленных задач. К подобным задачам можно отнести изменение внешнего вида стандартных модулей, макетов вывода материалов на сайт и многое другое.
В одной из предыдущих статей посвященных созданию собственного шаблона мы столкнулись с ситуацией, когда в модулях совместно с названием материала должны были отображаться их изображения. Для решения подобной задачи чтобы не искать сторонние расширения можно воспользоваться переопределением макета модулей и добиться желаемого результата.
Чтобы все стало понятно посмотрите на скриншот стандартного модуля популярных материалов и того что должно получиться после переопределения его макета:
Как видите, после переопределения обычный модуль может стать уникальным. И нам не придется тратить время, а возможно и деньги на поиск подходящего модуля сторонних разработчиков.
Для чего нужно переопределение?
Вполне законный вопрос, зачем нам создавать какое то переопределение, если файлы можно редактировать напрямую. Да это так, но как мы знаем, после обновления Joomla до новой версии все файлы ядра перезаписываются, таким образом можно потерять все внесенные изменения.
Это конечно не проблема, если Вы помните что когда и как редактировали. Но так уж повелось, что человеку свойственно забывать любую информацию, особенно если прошло достаточно много времени. Вот именно поэтому стоит один раз создать переопределение определенных файлов ядра и быть спокойным после каждого обновления Joomla.
Но тут есть и обратная сторона, ведь после обновления системы файлы перезаписываются не просто так, в них вносятся определенные правки для улучшения производительности и т.д. Поэтому после обновления стоит иногда заглядывать в файлы ядра и проверять их на наличие нового кода, это сделать все же проще, чем переписывать собственный код каждый раз заново.
Как создать переопределение в Joomla 3
Создать переопределение можно несколькими способами - простым копированием необходимых файлов в папку html текущего шаблона либо через панель управления. Во втором случае необходимо перейти в раздел «Расширения» -> «Шаблоны» -> «Шаблоны». Нажать на «Параметры» шаблона используемого по умолчанию и в открывшейся странице перейти на вкладку «Создать переопределение»:
Выбираем то, что будем переопределять, после этого в папке html текущего шаблона будет создана копия системных файлов. В эти файлы мы можем вносить необходимые изменения по своему усмотрению, не боясь потерять данные после очередного обновления Joomla.
Хочу отметить что можно создавать неограниченное количество переопределений одного и того же расширения, для этого необходимо дать различные имена файлам макета шаблона.
Переопределение модуля последних материалов
Хватит теории, давайте приступим к практической части. Разберем принцип переопределения на примере стандартного модуля Joomla 3 под названием «Материалы - Последние новости». В данный модуль мы помимо прочего добавим возможность вывода изображений материалов совместно с заголовками.
Для начала переходим в папку имя_сайта/modules/mod_articles_latest/tmpl. Там находится всего один файл шаблона данного модуля под названием default.php его нам надо скопировать.
Теперь переходим в папку html текущего шаблона (если её там нет, то создаем), создаем в ней папку с именем модуля (mod_articles_latest) и вставляем в неё файл default.php. Путь до файла должен получиться таким - имя_сайта/templates/имя_шаблона/html/mod_articles_latest/default.php
Переименуем данный файл, я назвал его last-news.php и откроем для изменения. Его содержимое для Joomla 3.8.1 следующее:
Как видите, все материалы выводятся в виде обычного не нумерованного списка, в котором кроме заголовков материала ничего не выводится. Давайте это поменяем, во-первых вместо не нумерованного списка будем использовать блоки div, во-вторых добавим изображения для каждого материала. Код будет таким:
<?php defined('_JEXEC') or die; ?>
<div class="latest-news<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php $arrImg=json_decode($item->images); ?>
<div class="article-title" itemscope itemtype="https://schema.org/Article">
<?php if ($arrImg->image_intro): ?>
<a href="<?php echo $item->link; ?>" itemprop="url">
<img src="<?=$arrImg->image_intro;?>" alt="<?php echo $item->title; ?>" title="<?php echo $item->title; ?>">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
<?php else: ?>
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
Я не буду расписывать каждую строчку кода, но для того чтобы стало понятно что за что отвечает, посмотрите на скриншот, и все станет понятно:
На самом деле код не сильно изменился, единственное что добавилось, это новая переменная $arrImg, которая содержит путь до изображения, а так же условие проверяющее было ли выбрано для данного материала вступительное изображение. Если изображение имеется, то мы его выводим вместе с заголовком материала, если его нет, тогда выводится один заголовок.
Осталось оформить все это дело при помощи css, после чего стандартный модуль последних материалов будет уже не узнать:
/* Модуль последних новостей */
.moduletable h3 {margin: 15px 0 0;font-size: 18px;background-color: #f0f0f0;padding: 8px 12px;}
.latest-news .article-title {overflow: auto; padding: 15px 0; border-bottom: 1px solid #b8b7b7; }
.latest-news .article-title:hover{background-color: #b8b7b7;}
.latest-news .article-title:hover >a {color: #F0F0F0;}
.latest-news :last-child {border-bottom: none !important;}
.latest-news img {float: left;width: 95px;margin-right: 4px;}
.latest-news a {color: #000;}
.latest-news a:hover {color: #000; text-decoration: none;}
Сохраняем изменения и переходим в панель управления. Открываем наш модуль для редактирования и на вкладке «Дополнительные параметры» в поле «Альтернативный макет» выбираем только что переопределенный макет модуля:
Осталось проверить результат! Для этого переходим на сайт и смотрим, что у нас получилось.
В заключение хочу сказать, что подобным образом можно переопределить (изменить шаблон) практически любого модуля в Joomla 3. Для тех, кто хочет узнать, как переопределить макет блога категории тогда советую почитать данную статью, а данная статья подошла к концу.
